<template>
    <div>
        <!--1.用户信息管理列表-->
        <el-container>
            <!--1-1.页面头部信息-->
            <el-header class="header-all">
                <!--1-1-1. 查询区域-->
                <div style="display: inline;">
                    <el-input placeholder="请输入要查询用户的姓名" prefix-icon="el-icon-search" v-model="funame" class="input-name" />
                    <el-button type="primary" class="but-select" @click="select">搜索</el-button>
                </div>
                <!--1-1-2. 功能区域-->
                <div class="div-header-but">
                    <el-button type="primary" plain class="but-select" @click="appEmp">新增</el-button>
                </div>
            </el-header>
            <!--1-2.列表区域-->
            <el-main>
                <el-table :data="userList">
                    <el-table-column prop="code" width="130px" label="人员编号"></el-table-column>
                    <el-table-column prop="name" width="130px" label="姓名"></el-table-column>
                    <el-table-column prop="sex" width="100px" label="性别"></el-table-column>
                    <el-table-column prop="age" width="100px" label="年龄"></el-table-column>
                    <el-table-column prop="shenfen" width="180px" label="身份证号"></el-table-column>
                    <el-table-column prop="ruTime" width="130px" label="入职日期"></el-table-column>
                    <el-table-column prop="cTime" width="130px" label="创建日期"></el-table-column>
                    <el-table-column width="200px" label="操作">、
                        <!-- 给列表当中行设置标识 -->
                        <template slot-scope="scope">
                            <el-button type="success" plain @click="update(scope.row)">编辑</el-button>
                            <el-button type="danger" plain @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-main>

        </el-container>
        <!-- 2.模板表单-->
        <el-form :model="user" class="form-dialog">
            <div class="form-div">
                <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" class="form-div-dialog">
                    <el-row>
                        <el-col :span="4">
                            <div style="display: inline;">
                                <el-form-item label="编号">
                                    <el-input v-model="user.code" type="text" class="form-input"
                                        style="background: dimgrey;" readonly placeholder="编号不可编辑" />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4" style="position: relative; left: 40%;">
                            <el-form-item label="姓名">
                                <el-input tabindex="1" focus="true" v-model="user.uname" maxlength="15" minlength="2"
                                    type="text" class="form-input" placeholder="请输入姓名" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4">
                            <div style="display: inline;">
                                <el-form-item label="性别">
                                    <el-select v-model="user.sex" style="width: 253px;">
                                        <el-option value="男">男</el-option>
                                        <el-option value="女">女</el-option>
                                    </el-select>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4" style="position: relative; left: 40%;">
                            <div style="display: inline;">
                                <el-form-item label="身份证号">
                                    <el-input v-model="user.shenfen" type="text" maxlength="18" minlength="17"
                                        class="form-input" placeholder="请输入身份证号" />
                                </el-form-item>

                            </div>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="4">
                            <div style="display: inline;">
                                <el-form-item label="年龄">
                                    <el-input v-model="user.age" type="text" maxlength="2" minlength="1" class="form-input"
                                        placeholder="请输入年龄" />

                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="4" style="position: relative; left: 40%;">
                            <div style="display: inline;">
                                <el-form-item label="入校日期">
                                    <el-date-picker v-model="user.ruTime" type="date" style="width: 252px;"
                                        placeholder="请选择日期"></el-date-picker>
                                </el-form-item>
                            </div>
                        </el-col>
                    </el-row>

                    <span slot="footer">
                        <el-button type="info" plain @click="cancel">取消</el-button>
                        <el-button type="primary" plain @click="save()">保存</el-button>
                    </span>
                </el-dialog>
            </div>
        </el-form>
    </div>
</template>

<script>
export default {
    name: 'EmpList',
    data() {
        return {
            funame: '',
            userList: [
                { "code": "T20230421", "name": "张三", "sex": "男", "age": "23", "shenfen": "1566278392390", "ruTime": "20220101", "cTime": "20211212" },
                { "code": "T20230422", "name": "李四", "sex": "女", "age": "19", "shenfen": "1566278392311", "ruTime": "20220101", "cTime": "20211212" }
            ],
            dialogVisible: false,
            user: {
                code: "",
                uname: "",
                sex: "",
                age: "",
                shenfen: "",
                ruTime: "",
                cTime: "",
            },
            dialogTitle: '新增用户信息'
        }
    },
    methods: {
        select() {
            console.log("获取要查询的信息")
        },
        appEmp() {
            console.log("已经进入填写人员信息方法")

            //讲所以的表单控件进行清空 
            this.user.code = ""
            this.user.uname = ""
            this.user.sex = ""
            this.user.shenfen = ""
            this.user.age = ""
            this.user.ruTime = ""
            // 打开弹窗 
            this.dialogVisible = true
        },
        update(User) {
            console.log("已经进入修改人员信息方法")
            // 对要修改的信息进行输出 
            console.log(User.uname)
            // 将获取的行信息绑定到相应的控件上 
            this.user = User

            // 打开弹窗 
            this.dialogTitle = "修改用户信息"
            this.dialogVisible = true

        },
        del(User) {
            console.log("可以删除当前选中的信息")
            // 获取要删除的编号 
            console.log("要删除的编号为:" + User.code)
            // 找出要删除的对象在集合当中所在的索引 
            var index = this.userList.findIndex(item => {
                console.log(item.code + "=====" + item.uname)
                // 找出与选中的编号在集合当中的索引数 
                if (item.code == User.code) {
                    return index
                }
            })
            // 利用索引从集合当中删除相关对象 
            this.userList.splice(index, 1)
        },
        cancel() {
            console.log("取消对数据的保存，并且关闭弹窗")
            // 关闭弹窗 
            this.dialogVisible = false
        },
        save() {
            console.log("保存弹窗当中的内容，保存成功后自动关闭弹窗")
            // 关闭弹窗 
            this.dialogVisible = false

            if (this.user.code == "") {
                // 新增信息 
                console.log("进入保存当中新增方法")
                // 将当前表单控制的数据保存到集合当中 
                console.log("获取表单当中的姓名" + this.user.uname)

                // 模拟人员编号 
                var num = this.userList.length + 1
                this.user.code = num;

                // 获取当前系统日期 
                var myDate = new Date()
                this.user.cTime = myDate.toLocaleDateString() // 只获取当前的日期信息 

                // 对入职日期的转换 
                console.log(this.user.ruTime)
                var tempRuDate = new Date(this.user.ruTime) // 对输入的日期信息进行格式转换 
                this.user.ruTime = tempRuDate.toLocaleDateString()

                // 将表单当中的信息插入到当前内存集合当中 
                this.userList.push(this.user)
            } else {
                // 修改 
                console.log("进入保存当中修改方法")
            }
        }
    }
}
</script>
<!-- 1-1-1 开始对应每个控件及页面的样式进行绘制-->
<style>
.input-name {
    width: 300px;
    margin: 0px;
    padding: 0px;
    size: mini;

}

.but-select {
    margin-left: 5px;
    size: mini;
}

.div-header-but {
    margin-left: 5px;
    margin-right: 20px;
    display: inline;
}

.header-all {
    padding: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 .form-dialog { 
 margin: 0px; 
 padding:0px; 
 }
.form-div { 
text-align: left; 
}
 .form-div-dialog { 
 padding:0px; 
 width:85%;
 }
 .form-input{
    width: 253px;
    height: 20px;
    size: mini;
 }</style>